<template>
  <div>
    <div class="main">
      <div class="main_item">
        <titleVue :title="'基本信息'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#939393',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="关联运单">
            {{ data.waybillNo }}
          </el-descriptions-item>
          <el-descriptions-item label="关联订单">{{ data.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="项目名称">{{ data.projectName }}</el-descriptions-item>
          <el-descriptions-item label="业务类型">{{ data.orderTypeStr }}</el-descriptions-item>
          <el-descriptions-item label="计价方式">{{ data.pricingMethodStr }}</el-descriptions-item>
          <el-descriptions-item label="计量单位">{{ data.measureUnitStr }}</el-descriptions-item>
          <el-descriptions-item label="运量">{{ data.cargoWeight }}</el-descriptions-item>
          <el-descriptions-item label="司机姓名">{{ data.driverName }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ data.phoneNumber }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item">
        <titleVue :title="'运单审核信息'"></titleVue>
        <el-descriptions class="descriptionsInfo WaybillOrderInfo" :column="3" border :labelStyle="{
          color: '#262626',
          backgroundColor: '#DDDDDD',
          width: '120px',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="审核结果">{{ waybillAuditInfoVo.waybillAuditResultStr }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{ waybillAuditInfoVo.auditUser }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{ waybillAuditInfoVo.resultTime }}</el-descriptions-item>
          <el-descriptions-item label="司机修正运量">{{ waybillAuditInfoVo.amendWeight }}</el-descriptions-item>
          <el-descriptions-item label="审核确定运量">{{ waybillAuditInfoVo.auditConfirmWeigh }}</el-descriptions-item>
          <el-descriptions-item class="rowspan2" label="审核上传附件">
            <div style="color: #1890ff; cursor: pointer" @click="downFile(waybillAuditInfoVo.auditUrls)">
              {{ "附件" + suffixName }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="审核司机运费">{{ waybillAuditInfoVo.amount }}</el-descriptions-item>
          <el-descriptions-item label="异常扣款金额">{{ waybillAuditInfoVo.amountLose }}</el-descriptions-item>
          <el-descriptions-item></el-descriptions-item>



          <el-descriptions-item :span="3" label="审核说明">
            <div style="width:100%">{{ waybillAuditInfoVo.resultInfo }}</div>
          </el-descriptions-item>



        </el-descriptions>
      </div>
      <!-- v-if="data.settlementStatus == 0" -->
      <!-- <div class="main_item" >
        <titleVue :title="'核算信息'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" border :labelStyle="{
          color: '#262626',
          backgroundColor: '#DDDDDD',
          width: '120px',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="核算司机费用">{{
            data.billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="核算异常扣款">{{
            data.abnormalDeduction
          }}</el-descriptions-item>
          <el-descriptions-item label="核算司机金额">{{
            data.settlementAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="核算人">{{
            data.adjustAccountsPerson
          }}</el-descriptions-item>
          <el-descriptions-item label="核算时间">{{
            data.adjustAccountsTime
          }}</el-descriptions-item>
          <el-descriptions-item label="核算说明">{{
            data.statementExplain
          }}</el-descriptions-item>
        </el-descriptions>
      </div> -->

      <!-- //待结算settlementStatus=0 才显示 -->
      <div class="main_item" v-if="data.settlementStatus == 0">
        <titleVue :title="'结算费用'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" border :labelStyle="{
          color: '#262626',
          backgroundColor: '#DDDDDD',
          width: '120px',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
}">
          <el-descriptions-item label="司机金额">{{
            data.billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="平台结算金额">{{
            data.settlementAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="保费">无</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item">
        <titleVue :title="'定位信息'"></titleVue>
        <el-descriptions class="descriptionsInfo" :column="3" :labelStyle="{
          color: '#262626',
          height: '40px',
          fontSize: '12px',
          fontWeight: 'bold',
          marginRight: '20px',
          padding: '10px',
        }" :contentStyle="{
  color: '#262626',
  fontSize: '12px',
  lineHeight: '40px',
}">
          <el-descriptions-item label="是否定位车辆">否</el-descriptions-item>
          <el-descriptions-item label="是否定位司机">否</el-descriptions-item>
          <el-descriptions-item label="轨迹状态">无</el-descriptions-item>
          <el-descriptions-item label="车辆定位数量">0</el-descriptions-item>
          <el-descriptions-item label="司机定位数量">0</el-descriptions-item>
          <el-descriptions-item label="异常原因">无</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <el-dialog class="dialog" title="打款确认" :visible.sync="visiblePaymentBox" width="400px">
      <!-- action	必选参数，上传的地址 -->
      <!-- on-preview	点击文件列表中已上传的文件时的钩子 -->
      <!-- on-remove	文件列表移除文件时的钩子 -->
      <!-- before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。 -->
      <!-- limit	最大允许上传个数 -->
      <!-- on-exceed	文件超出个数限制时的钩子 -->
      <!-- file-list	上传的文件列表,  -->

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="打款凭证">
          <el-upload class="upload" :action="url" :on-preview="handlePreview" :on-remove="handleRemove"
            :on-change="handleChange" :before-remove="beforeRemove" :limit="1" :on-exceed="handleExceed"
            :on-success="onSuccess" :file-list="fileList" :headers="headers">
            <el-button size="small" class="uploadBtn" type="primary">选择文件</el-button>
            <span slot="tip" class="el-upload__tip">
              支持PDF、JPG等格式
            </span>
          </el-upload>
        </el-form-item>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button class="cancelBtn" @click="visiblePaymentBox = false">取 消</el-button>
        <el-button class="submitBtn" type="primary" @click="visiblePaymentBox = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import titleVue from "@/components/titleVue.vue";
import BASEURL from "@/http/BaseUrl";
import httpApi from "@/http";
export default {
  props: {
    data: {
      typeof: Object,
      default: {},
    },
  },
  data() {
    return {
      fileList: [],
      signImage: "",//文件上传成功后的返回的url
      visiblePaymentBox:false,
      form:{},
      url: BASEURL.TCHYURL + "/file/upload",
      headers: {
        Authorization: localStorage.getItem("token"),
      },


      /*  */
      waybillAuditInfoVo: {},
      driverBillId: "",
      dialogVisible: false,
      detailsData: {},
      AuditForm: {
        amount: "",
        auditDeduction: "",
        driverBillId: "",
        billAmount: "",
        settlementAmount: "",
        accountsDeduct: "",
      },
      AuditRules: {
        billAmount: [{ required: true, message: "不能为空", trigger: "blur" }],
        settlementAmount: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        accountsDeduct: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      suffixName: "",
    };
  },
  methods: {

    getDetails() {
      // this.driverBillId = this.$route.params.driverBillId;
      // let params = { driverBillId: this.driverBillId };
      // httpApi.SettlementDocApi.getStatementAccountDetails(params).then(
      //   (res) => {
      //     this.AuditForm.amount = res.data.data.waybillAuditInfoVo.amount;
      //     this.AuditForm.auditDeduction =
      //       res.data.data.waybillAuditInfoVo.amountLose;
      //     this.AuditForm.driverBillId = res.data.data.driverBillId;
      //     this.getFileAfter(res.data.data.waybillAuditInfoVo.auditUrls);
      //      this.waybillAuditInfoVo=res.data.data.waybillAuditInfoVo

      //     // console.log("详情数据", res.data.data);
      //   }
      // );
    },

    openDialog() {
      this.visiblePaymentBox = true;
    },
    closeDialog() {
      this.visiblePaymentBox = false;
    },
    getFileAfter(string) {
      // console.log('字符', string)
      string.lastIndexOf(".");
      // console.log(string.lastIndexOf('.'));
      this.suffixName = string.substring(string.lastIndexOf("."));
      // console.log('后缀', this.suffixName);
    },
    downFile(url) {
      window.open(url);
    },
    submitForm(AuditForm) {
      this.$refs[AuditForm].validate((valid) => {
        if (valid) {
          let parmas = {
            settlementAmount: this.AuditForm.settlementAmount,
            billAmount: this.AuditForm.billAmount,
            abnormalDeduction: this.AuditForm.accountsDeduct,
            driverBillId: this.AuditForm.driverBillId,
          };
          httpApi.SettlementDocApi.calculateSettlement(parmas).then((res) => {
            if (res.data.code == 200) {
              this.$router.go(0);
            } else {
              return false;
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },


    /* 文件上传 */
    // 	文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    //点击文件列表中的文件，下载文件到本地
    handlePreview(file) {
      // console.log(file, '点击文件列表中已上传的文件时的钩子');
      this.file = file;
      // console.log('123123', file);

      if (file.response != undefined) {
        window.open(this.file.response.data.url);
      } else {
        window.open(this.fileList[0].url);
      }
    },
    //      <!-- on-exceed	文件超出个数限制时的钩子 -->
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    // before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 获取文件名后缀
    getAfterFileName(string) {
      string.lastIndexOf(".");
      // console.log(string.lastIndexOf('.'));
      this.fileName = this.fileName.substring(string.lastIndexOf("."));
      // console.log('后缀', this.fileName);
    },
    // 文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      // console.log('文件响应', response);
      this.fileName = response.data.name;
      this.getAfterFileName(this.fileName);
      this.signImage = response.data.url;
      console.log(this.signImage);
    },
    handleChange(file, fileList) { },

  },
  mounted() {
    this.getDetails();

  },
  components: {
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.main {
  .main_item {
    margin-bottom: 40px;

  }
}

.AuditDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 0px;
    height: 50px;
    line-height: 50px;
  }

  .demoForm {
    ::v-deep .el-form-item__label {
      color: #262626;
      font-size: 12px;
      font-weight: bold;
    }

    .Btn {
      height: 36px;
      width: 80px;
      font-size: 12px;
    }
  }
}
.dialog {
    ::v-deep .el-dialog__header {
        border-bottom: 1px solid #f0f0f0;
        padding: 15px 20px;
        color: #262626;
        font-size: 14px;
        font-weight: bold;
        height: 50px;
    }

    ::v-deep .el-dialog__title {
        font-size: 14px;
        color: #303133;
        font-weight: bold;
    }

    //关闭图标
    ::v-deep .el-dialog__headerbtn .el-dialog__close {
        font-size: 15px;
    }

    ::v-deep .el-dialog__body {
        padding: 20px;
    }

    ::v-deep .el-form-item__label {
        line-height: 32px;
        font-size: 12px;
        color: #262626;
        padding-top: 4px;
    }

    .upload {
        .uploadBtn {
            width: 80px;
            height: 32px;
            background-color: #1890ff;
            font-size: 12px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            transition: 0.2s;
            margin-right: 12px;
            margin-bottom: 8px;

            &:hover {
                opacity: 0.8;
            }
        }

        .el-upload__tip {
            color: #cccccc;
            font-size: 12px;
        }

        ::v-deep .el-upload-list {
            background-color: #eef3f9;
        }
    }

    .cancelBtn {
        width: 80px;
        height: 36px;
        border: 1px solid #d9d9d9;
        color: #262626;
        font-size: 12px;
        border-radius: 4px;
        background-color: #fff;
        transition: 0.2s;

        &:hover {
            color: #1890ff;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
    }

    .submitBtn {
        background-color: #1890ff;
        width: 80px;
        height: 36px;
        color: #fff;
        border-radius: 4px;
        font-size: 12px;
        transition: 0.2s;

        &:hover {
            opacity: 0.8;
        }
    }
}
</style>
